<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.orderNo" class="search-input" clearable placeholder="请输入流水号"/>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.type" placeholder="请选择订单类型" clearable filterable style="width: 200px">
                        <Option v-for="(item,index) in orderList" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.order_status" placeholder="请选择订单状态" clearable filterable style="width: 200px">
                        <Option v-for="(item,index) in orderStatusList" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.pay_status" placeholder="请选择支付状态" clearable filterable style="width: 200px">
                        <Option value="UNPAID">未支付</Option>
                        <Option value="PAID">已支付</Option>
                        <Option value="REFUNDED">已退款</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.delivery_status" placeholder="请选择配送状态" clearable filterable style="width: 200px">
                        <Option value="0">未配送</Option>
                        <Option value="1">正在配送</Option>
                        <Option value="2">配送完成（已自提）</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.delivery_type" placeholder="请选择配送类型" clearable filterable style="width: 200px">
                        <Option value="0">店内</Option>
                        <Option value="1">商家自配送</Option>
                        <Option value="2">到店自提</Option>
                        <Option value="3">第三方配送</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row class="inner-box">
            <vxe-table
                    border
                    show-overflow
                    resizable
                    highlight-hover-row
                    size="medium"
                    align="center"
                    header-align="center"
                    :loading="loading"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column field="originalOrderNo" title="订单号" min-width="120"></vxe-table-column>
                <vxe-table-column field="type" title="类型" min-width="120">
                    <template v-slot="{row}"><span>{{typeList[row.type]}}</span></template>
                </vxe-table-column>
                <vxe-table-column field="orderStatus" title="状态" min-width="120">
                    <template v-slot="{row}"><span>{{statusList[row.orderStatus]}}</span></template>
                </vxe-table-column>
                <vxe-table-column field="payStatus" title="支付状态" min-width="120">
                    <template slot-scope="{row}">
                    <span v-if="row.payStatus == 'UNPAID'">未支付</span>
                    <span v-if="row.payStatus == 'PAID'">已支付</span>
                    <span v-if="row.payStatus == 'REFUNDED'">已退款</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="receivedAmount" title="订单总金额" min-width="120"></vxe-table-column>
                <vxe-table-column field="action" title="操作" width="200">
                    <template v-slot="{row}">
                            <Button type="success" size="small" @click="editAction(row)">详情</Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
        </Row>
    </div>
</template>

<script>
import { OrderInfofindList } from '@/api/shop'
export default {
  data () {
    return {
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      modalShow: false,
      modalTitle: '',
      modalType: '',
      loading: false,
      tableData: [],
      orderList: [{ value: '0', label: '售货单' }, { value: '1', label: '退货单' }, { value: '3', label: '反结账单' }, { value: '4', label: '反结账退货单' }, { value: '5', label: '权益卡(次卡)' }, { value: '6', label: '充值卡' }, { value: '7', label: '拼团订单' }],
      orderStatusList: [{ value: 'UNPROCESS', label: '未处理' }, { value: 'REFUSED', label: '已拒绝' }, { value: 'CANCELED', label: '已取消' }, { value: 'COMPLETED', label: '已完成' }, { value: 'REFUNED', label: '已退货' }, { value: 'REV_BANLANCED', label: '已反结账' }, { value: 'CANCELED', label: '已取消' }, { value: 'CLOSED', label: '已关闭' }, { value: 'REVSER', label: '已撤销' }, { value: 'FINISHED', label: '已完成' }],
      statusList: {
        UNPROCESS: '未处理',
        REFUSED: '已拒绝',
        CANCELED: '已取消',
        COMPLETED: '已完成',
        REFUNED: '已退货',
        REV_BANLANCED: '已反结账',
        CLOSED: '已关闭',
        REVSER: '已撤销',
        FINISHED: '已完成'
      },
      typeList: { 0: '售货单', 1: '退货单', 3: '反结账单', 4: '反结账退货单', 5: '权益卡(次卡)', 6: '充值卡', 7: '拼团订单' }
    }
  },
  methods: {
    init () {
      this.loading = true
      const param = {
        order_no: this.searchObj.order_no,
        type: this.searchObj.type,
        order_status: this.searchObj.order_status,
        pay_status: this.searchObj.pay_status,
        delivery_status: this.searchObj.delivery_status,
        delivery_type: this.searchObj.delivery_type,
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      OrderInfofindList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.loading = false
          this.tableData = data.data.result
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
          this.loading = false
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {
      this.init()
    },
    editAction () {
      this.modalShow = true
      this.modalTitle = '编辑'
      this.modalType = 'edit'
    },
    delBtn () {},
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    /deep/ .ivu-btn-group:not(.ivu-btn-group-vertical)>.ivu-btn:first-child:not(:last-child){
        margin-right: 10px;
        font-size: 12px;
    }
    /deep/ .ivu-btn-group:not(.ivu-btn-group-vertical)>.ivu-btn:last-child:not(:first-child){
        font-size: 12px;
    }
    .container {
        margin-bottom: 50px;
    }

    .title-style {
        padding: 8px 12px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 15px 0;
        font-size: 16px;
        width: 100%;
    }

    .inner-box {
        padding: 20px;
    }

    .order-content {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .form-label {
        margin-right: 5px;
        font-weight: 500;
    }

    .settlement-tag {
        display: inline-block;
        width: 10px;
    }

    .settlement {
        display: inline-block;
        margin-right: 10px;
        width: 100px;
    }
</style>
